<template>
  <div id="myVideo"></div>
</template>
<script>
export default {
  props: {
    videoList: {
      type: Array,
      default: () => [],
    },
    vid: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      myVideo: null,
      player: null,
    };
  },
  created() {
    this.setPlayerCallBack();
  },
  mounted() {
    console.log(window)
    if (window.ccH5PlayerJsLoaded) {
      this.createPlayer();
    }
  },
  watch: {
    vid: {
      handler(newValue, oldValue) {
        if (newValue !== oldValue) {
          this.nextPlayer();
        }
      },
    },
  },
  methods: {
    createPlayer() {
      this.myVideo = document.getElementById("myVideo");
      console.log(this.myVideo);
      //   if (this.idx >= this.list.length) this.idx = 0;
      this.player = window.createCCH5Player({
        vid: this.vid,
        siteid: "677D7D6D589120DA",
        autoStart: true,
        width: "100%",
        height: "100%",
        parentNode: this.myVideo,
      });
      //   this.idx++;
    },
    nextPlayer() {
      this.player && this.player.destroy();
      this.createPlayer();
    },
    setPlayerCallBack() {
      window.onCCH5PlayerLoaded = this.onCCH5PlayerLoaded;
      window.on_CCH5player_ready = this.onPlayerReady;
      window.on_player_volumechange = this.onPlayerVolumeChange;
    },
    onCCH5PlayerLoaded() {
      window.ccH5PlayerJsLoaded = true;
      this.createPlayer();
    },
    onPlayerReady(obj) {
      console.log("CCH5player_ready", obj);
      window.cc_js_Player.setVolume(0.3);
    },
    onPlayerVolumeChange(volume, vid) {
      console.log("设置音量回调:  ", volume, vid);
    },
  },
  destroyed() {
    this.player && this.player.destroy();
  },
};
</script>
<style lang="scss" scoped>
#myVideo {
  width: 100%;
  height: 500rpx;
}
</style>
